<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container" style="width: 500px; height: 500px;"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
</body>

</html>
<script>
    //echats.js文件会对外暴露一个echats对象
    //1.创建并初始化一个echarts实例
    var con = document.querySelector('#container')
    var e = echarts.init(con)

    //2.绘制图表
    e.setOption({
        title: { //标题
            text: 'H52217统计',
            left: 'center',
        },

        legend: {
            top: 25,
            // rigth:10
        },
        xAxis: {
            data: ['第1天', '第2天', '第3天', '第4天', '第5天']
        },
        //x轴
        yAxis: {
            splitLine: {
                show: false
            }
        },
        //y轴

        series: [//数据系列
            {
                barWidth: 50,
                showBackground:true,
                color: 'pink',
                itemStyle: {
                    borderRadius: [20, 30, 69, 53]
                },
                type: 'pie',//line,bar,pie   //type折线图
                data: [70, 50, 89, 60, 40]//坐标点
            },
            {
                type: 'pie',//line,bar,pie   //type折线图
                data: [70, 50, 89, 60, 40],//坐标点
                symbolSize: 20,
                symbol: '',
                symbol: 'circle',
                itemStyle: {
                    normal: {
                        color: 'red',
                        borderWidth: 5,

                    }
                }
            }
            
        ]

    })
</script>